<script>
export default {
  data () {
    return {
      testBoolean: true,
      style: 'basic',
      styleMultiple: ['basic', 'bold']
    }
  }
}
</script>

<template>
  <div> Ref: https://v3.cn.vuejs.org/guide/class-and-style.html </div>
  <h1> Style </h1>

  <div class="basic"> Static </div>

  <div class="basic bold"> Static </div>

  <div :class="style"> Use v-bind </div>

  <div :class="styleMultiple"> Multiple Style </div>

  <div :class="testBoolean ? style : 'bold'"> Use Expression </div>

</template>

<style scoped>
.basic {
  color: #FF0000;
}
.bold {
  font-weight: bold;
}
</style>
